<template>
    <div class="wrapper">
        <div class="dis">
            <div class="main">
                <div class="main_header dis">
                    基本信息
                </div>
                <div class="line">

                </div>
                <div class="info_box"
                    style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
                    <div class="">
                        姓名
                    </div>
                    <div class="">
                        {{list.agentIdCardName}}
                    </div>
                </div>
                <div class="info_box_a"
                    style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
                    <div class="">
                        服务商编号
                    </div>
                    <div class="">
                        {{list.agentNo}}
                    </div>
                </div>
                <div class="info_box_a"
                    style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
                    <div class="">
                        手机号
                    </div>
                    <div class="">
                        {{list.agentPhoneNo}}
                    </div>
                </div>
                <div class="info_box_a"
                    style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
                    <div class="">
                        实名状态
                    </div>
                    <div class="" v-if="list.isNoReal==0">
                        未实名
                    </div>
                    <div class="" v-else>
                        已实名
                    </div>
                </div>
            </div>
        </div>
        <div class="dis">
            <div class="main">
                <div class="main_header dis">
                    认证信息
                </div>
                <div class="line">

                </div>
                <div class="info_box"
                    style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
                    <div class="">
                        姓名
                    </div>
                    <div class="">
                        {{list.agentIdCardName}}
                    </div>
                </div>
                <div class="info_box_a"
                    style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
                    <div class="">
                        手机号
                    </div>
                    <div class="">
                        {{list.agentPhoneNo}}
                    </div>
                </div>
            </div>
        </div>
        <div class="dis">
            <div class="main">
                <div class="main_header dis">
                    结算信息
                </div>
                <div class="line">

                </div>
                <div class="info_box"
                    style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
                    <div class="">
                        卡号
                    </div>
                    <div class="">
                        {{list.bankCardNo}}
                    </div>
                </div>
                <div class="info_box_a"
                    style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
                    <div class="">
                        开户行
                    </div>
                    <div class="">
                        {{list.bankCardName}}
                    </div>
                </div>
                <div class="info_box_a"
                    style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
                    <div class="">
                        手机号
                    </div>
                    <div class="">
                        {{list.agentPhoneNo}}
                    </div>
                </div>
            </div>
        </div>
        <div class="dis" >
            <div class="main">
                <div class="main_header dis">
                    客服信息
                    <div class="strength" @click="autonymUpdate">
                        修改客服信息
                    </div>
                </div>
                <div class="line">

                </div>
                <div class="info_box"
                    style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
                    <div class="">
                        客服提示语
                    </div>
                    <div class="" v-if="list.serviceContent">
                        {{list.serviceContent}}
                    </div>
                    <div class="" v-else>
                        暂无
                    </div>
                </div>
                <div class="info_box_a" style="width: 100%;">
                    <div class="matching">
                        <div class="" v-if="list.serviceContent">
                            <img :src="list.serviceQrCode" alt="" />
                        </div>
                        <div class="" v-else>
                            无
                        </div>
                        <div class="dimension">
                            客服二维码
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <div class="btn_box dis">
            <div class="btn dis" @click="realName">
                <span v-if="list.isNoReal==1">修改实名</span>
                <span v-else>去实名</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        selectAgentInf
    } from '@/api/terminal'
    import store from '@/store'
    import {
        showToast
    } from 'vant'
    export default defineComponent({
        name: 'sateActive',
        setup() {
            const router = useRouter()
            const state = reactive({
                list: ''
            })
            const getList = () => {
                selectAgentInf({

                }).then(res => {
                    state.list = res.data
                })
            }
            //去实名
            const realName = () => {
                router.push({
                    path: "/autonym",
                    query: {
                        type: 0
                    }
                })
            }
            getList()
            //修改实名
            const autonymUpdate = () => {
                router.push({
                    path: "/autonym",
                    query: {
                        type: 1,
                    }
                })
            }
            return {
                ...toRefs(state),
                getList,
                realName,
                autonymUpdate
            }
        }
    })
</script>
<style scoped lang="scss">
    .wrapper {
        background-color: #fff;
        height: 100%;
        min-height: 100vh;

        .main {
            width: 88%;
            margin-top: 12px;
            // height: 160px;
            background: #FFFFFF;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.26);
            border-radius: 6px;
            padding-top: 14px;
            padding-left: 11px;
            padding-right: 11px;
            padding-bottom: 14px;
            box-sizing: border-box;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #333333;

            .info_box {
                margin-top: 12px;
            }

            .info_box_a {
                margin-top: 15px;

                .matching {
                    width: 50%;
                }

                img {
                    width: 150px;
                    height: 100px;
                }

                .dimension {
                    margin-top: 6px;
                    text-align: center;
                }
            }

            .dic {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .main_header {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: #FF2828;
                position: relative;

                .strength {
                    position: absolute;
                    right: 6px;
                    font-size: 12px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #1890ff;
                }
            }

            .line {
                width: 100%;
                height: 1px;
                border-bottom: 1px solid #F3F3F3;
                margin-top: 11px;
            }
        }

        .btn_box {
            margin-top: 24px;

            .btn {
                width: 339px;
                height: 40px;
                background: #FF2828;
                border-radius: 6px 6px 6px 6px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                color: #FFFFFF;
            }
        }
    }
</style>